<template>
	<view class="container">
		<view class="bg">
			<image src='/static/login.png'></image>
		</view>
		<view class="wrap">
			<view class="logo-wrap">
				<image src='/static/logo.png'></image>
				<view class="logo-text">漫渡共享平台</view>
			</view>
			<view class="login-wrap">
				<view class="form-wrap">
					<view class="form-item">
						<label>+86</label>
						<input type='tel' placeholder="请输入手机号" placeholder-class="pl" v-model="formObj.mobile"
							@input="getValue" data-k='0' />
					</view>
					<view class="form-item">
						<input type='number' placeholder="请输入验证码" placeholder-class="pl" v-model="formObj.code" @input="getValue" data-k='1'/>
						<!-- <button class="btn base-btn line-center" id='btn' :disabled="code.isDisabled"
							:loading="code.isLoading" v-if='code.isSend'>{{code.codeText}}</button> -->
							<button class="btn base-btn line-center" @tap='getPhoneCode' :disabled="code.isDisabled"
								:loading="code.isLoading" v-if='code.isSend'>{{code.codeText}}</button>
						<button class="btn base-btn line-center" @tap='getPhoneCode' :disabled="code.isDisabled"
							:loading="code.isLoading" v-else>{{code.countTime}}秒后重发</button>
					</view>
				</view>
				<button class="base-btn login-btn line-center" :disabled="isDisabled"
					:loading="isLoading" @tap='toLogin'>{{btnText}}</button>
				<view class="xieyi-wrap line-center" @tap='toCheck'>
					<uni-icons type="circle" size="20" v-if='!isCheck'></uni-icons>
					<uni-icons type="checkbox-filled" size="20" color="#0e0e0e" v-else></uni-icons>
					<view class="xieyi-con line-center">
						我已阅读并同意<text @tap.stop='toAgree(1)'>《服务协议》</text>和<text @tap.stop='toAgree(2)'>《隐私政策》</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				isCheck: false,
				code: {
					isDisabled: true,
					isLoading: false,
					codeText: '获取验证码',
					countTime: 60,
					timer: null,
					isSend: true,
				},
				formObj: {
					mobile: '',
					code: '',
					plat: 2,
				},
				isDisabled: true,
				isLoading: false,
				btnText: '登录',
			}
		},
		onLoad() {
			// #ifdef  H5
			// this.openH5ImgCode()
			// #endif
		},
		methods: {
			toCheck() {
				this.isCheck = !this.isCheck;
			},
			getValue(e) {
				let that = this,
					formObj = that.formObj,
					{
						k,
						type
					} = e.currentTarget.dataset,
					v = that.$trim(e.detail.value);
			
				switch (Number(k)) {
					case 0:
						formObj.mobile = v;
						if ((/^1[3456789]\d{9}$/.test(that.formObj.mobile))) {
							that.code.isDisabled = false;
						}
						this.setBtnStatus()
						break;
					case 1:
						formObj.code = v;
						this.setBtnStatus()
						break;
			
				}
				that.formObj = formObj;
			},
			setBtnStatus(){
				let formObj = this.formObj;
				if (formObj.code.length == 6 && formObj.mobile) {
					this.isDisabled = false;
				} else {
					this.isDisabled = true;
				}
			},
			openH5ImgCode(){
				let that = this;
				var script = document.createElement('script');
				script.src = "./static/ct4.js";
				document.body.appendChild(script);
				script.onload = script.onreadystatechange = function() {
					initAlicom4({
						captchaId: "37e7519fd957201b729d612f3031d914",
						product: 'bind',
					}, function(captcha) {
						captcha.onReady(function() {}).onSuccess(function() {
							var result = captcha.getValidate();
							if (result) {
								result.captcha_id = "37e7519fd957201b729d612f3031d914";
								that.getPhoneCode()
							}
						}).onError(function() {
							//your code
						})
						const button = document.getElementById('btn');
						button.addEventListener('click',()=>{
							if (!that.formObj.mobile) {
								uni.showToast({
									title: '请输入手机号',
									icon: 'none',
									mask: true
								})
								return;
							}
							if (!(/^1[3456789]\d{9}$/.test(that.formObj.mobile))) {
								uni.showToast({
									title: "手机号码不合法，请重新输入",
									icon: 'none',
									mask: true
								});
								return;
							}
							captcha.showCaptcha();
						})
						
					});
				}
			},
			getPhoneCode() {
				let that = this;
				if (!that.formObj.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						mask: true
					})
					return;
				}
				if (!(/^1[3456789]\d{9}$/.test(that.formObj.mobile))) {
					uni.showToast({
						title: "手机号码不合法，请重新输入",
						icon: 'none',
						mask: true
					});
					return;
				}
				that.code.isDisabled = true;
				that.code.isLoading = true;
				that.code.codeText = '发送中...';
				app.globalRequest({
					api: app.getApi().loginApi.sendSms,
					method: 'POST',
					data: {
						mobile: that.formObj.mobile,
						type: 2
					}
				}).then(res => {
					if (res.code == 0) {
						that.code.isSend = false;
						that.code.isLoading = false;
						that.code.timer = setInterval(() => {
							that.code.countTime--;
							if (that.code.countTime <= 0) {
								clearInterval(that.code.timer);
								that.code.countTime = 60;
								that.code.isSend = true;
								that.code.isDisabled = false;
								that.code.codeText = '获取验证码';
							}
						}, 1000)
					} else {
						that.code.isDisabled = false;
						that.code.countTime = 60;
						that.code.isSend = true;
						that.code.isLoading = false;
						that.code.codeText = '获取验证码';
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				}).catch(err => {

				})
			},
			toLogin(){
				let that = this;
				if (!that.formObj.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						mask: true
					})
					return;
				}
				if (!(/^1[3456789]\d{9}$/.test(that.formObj.mobile))) {
					uni.showToast({
						title: "手机号码不合法，请重新输入",
						icon: 'none',
						mask: true
					});
					return;
				}
				if (that.formObj.code.length != 6) {
					uni.showToast({
						title: '请输入6位数字的验证码',
						icon: 'none',
						mask: true
					})
					return;
				}
				if (!that.isCheck) {
					uni.showToast({
						title: '请同意《服务协议》和《隐私政策》',
						icon: 'none',
						mask: true
					})
					return;
				}
				that.isDisabled = true;
				that.isLoading = true;
				that.btnText = '加载中...';
				app.globalRequest({
					api: app.getApi().loginApi.login,
					method: 'POST',
					data: this.formObj,
				}).then(res => {
					that.isDisabled = false;
					that.isLoading = false;
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							mask: true
						})
						that.btnText = '登录';
						that.isDisabled = false;
						that.isLoading = false;
						uni.setStorageSync('H5-TOKEN', res.data);
						uni.switchTab({
							url:'/pages/index/index'
						})
					} else {
						that.isDisabled = false;
						that.isLoading = false;
						that.btnText = '登录';
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				}).catch(err => {
					that.isDisabled = false;
					that.isLoading = false;
					that.btnText = '登录';
				})
			},
			toAgree(type) {
				uni.navigateTo({
					url: `/pages/agreement-detail/agreement-detail?type=${type}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 1171rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.wrap {
		position: relative;
		z-index: 2;
	}

	.logo-wrap {
		padding-top: 126rpx;

		image {
			width: 136rpx;
			height: 136rpx;
			margin: auto;
			display: block;
			border:6rpx solid #fff;
			border-radius: 100%;
			box-sizing: border-box;
		}

		.logo-text {
			font-weight: bold;
			font-size: 36rpx;
			color: #0E0E0E;
			text-align: center;
			margin-top: 38rpx;
		}
	}

	.login-wrap {
		margin: 38rpx 24rpx;
		padding: 36rpx 36rpx;
		min-height: 800rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.form-wrap {
		.form-item {
			padding: 0 34rpx;
			height: 100rpx;
			background: #F5F5F5;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			label {
				font-weight: bold;
				margin-right: 34rpx;
			}

			input {
				flex: 1;
				height: 100%;
			}

			.btn {
				background: transparent;
				border: 0;
				font-size: 28rpx;
				padding: 0;
			}

			.btn[disabled]:not([type]),
			.btn[disabled][type=default] {
				background-color: rgba(247, 230, 217, 0) !important;
				color: rgba(0, 0, 0, 0.8);
				opacity: 0.6;
			}
		}
	}

	.pl {
		font-size: 28rpx;
		color: #999999
	}

	.login-btn {
		height: 88rpx;
		background: linear-gradient(139deg, #191919 0%, #090909 100%);
		border-radius: 44rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 80rpx;
	}

	.xieyi-wrap {
		font-size: 24rpx;
		margin-top: 24rpx;

		.xieyi-con {
			margin-left: 8rpx;
		}

		text {
			color: #5B7DF7;
		}
	}
</style>